<template>
  <div id="userList" class="same-change-oldstyle">
    <div class="same-head-box">
      <div class="saem-seat-box">
        <div class="saem-seat-left">
          <span>当前位置：</span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>我的用户</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="saem-seat-right">
          <button class="same-search-btns same-search-export" @click="RefreshFun">
            刷新
          </button>
          <!-- <button class="same-search-btns" @click="returnBack">返回</button> -->
        </div>
      </div>
      <el-form ref="form" label-width="auto">
        <el-row :gutter="10">
          <el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="4">
            <el-form-item label="用户" label-width="40px">
              <el-input size="medium"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="4" :sm="12" :md="12" :lg="9" :xl="9">
            <el-form-item label="活动时间">
              <el-col :span="11">
                <el-form-item prop="date1">
                  <el-date-picker type="date" size="medium" placeholder="选择日期" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="1">-</el-col>
              <el-col :span="11">
                <el-form-item prop="date2">
                  <el-date-picker size="medium" type="date" placeholder="选择时间" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>

          <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="4">
            <el-form-item label-width="0">
              <el-button size="medium" type="primary">搜索</el-button>
              <el-button size="medium">重置</el-button>
              <el-button type="text">文字按钮 <i class="el-icon-arrow-down"></i></el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-form ref="form" label-width="auto">
        <el-row :gutter="10">
          <el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="4">
            <el-form-item label="用户" label-width="40px">
              <el-input size="medium"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="4">
            <el-form-item label-width="0">
              <el-button size="medium" type="primary">搜索</el-button>
              <el-button size="medium">重置</el-button>
              <el-button type="text">文字按钮 <i class="el-icon-arrow-up"></i></el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- <div class="same-search-left">
                    <div class="same-left-one">
                        <span class="same-search-span same-search-fisrt">注册时间：</span>
                        <el-date-picker
                                style="width:140px"
                                v-model="date1"
                                type="date"
                                size="medium"
                                value-format="yyyy-MM-dd"
                                placeholder="选择起始日期">
                        </el-date-picker>
                        <div class="same-interval">至</div>
                        <el-date-picker
                                style="width:140px"
                                v-model="date2"
                                type="date"
                                size="medium"
                                value-format="yyyy-MM-dd"
                                placeholder="选择截止日期">
                        </el-date-picker>
                    </div>
                    <div class="same-left-one">
                        <span class="same-search-span">用户手机号：</span>
                        <el-input size="medium" v-model="userPhone" maxlength="11" placeholder="请输入用户手机号码" style="width: 160px;"></el-input>
                    </div>
                    <div class="same-left-one">
                        <span class="same-search-span">用户名称：</span>
                        <el-input size="medium" v-model="name" maxlength="11" placeholder="请输入用户名或微信昵称" style="width: 160px;"></el-input>
                    </div>
                    <div class="same-left-one">
                        <button class="same-search-btns" type="button" @click='search()'>搜索</button>
                        <button class="same-search-btns same-reset-btn" type="button" @click='reset()'>重置</button>
                    </div>
                </div>
                <div class="same-search-right">

                </div> -->
    </div>

    <div class="same-table-box">
      <h4 class="same-title-box">
        用户列表
      </h4>
      <div class="table_box">
        <table border="0" cellspacing="0" v-loading="loading" element-loading-text="拼命加载中">
          <tr>
            <th><span>ID</span></th>
            <th><span>用户昵称</span></th>
            <th><span>手机号码</span></th>
            <th><span>注册方式</span></th>
            <th><span>注册时间</span></th>
            <th><span>最后一次消费设备</span></th>
            <th><span>最后一次消费时间</span></th>

            <th><span>操作</span></th>
          </tr>
          <tbody>
            <tr v-for="list in tableData" :key="list.id">
              <td>{{ list.user_no || "——" }}</td>
              <td>{{ list.name || "——" }}</td>
              <td>{{ list.phone || "——" }}</td>
              <td>
                <span class="wechat-color" v-if="list.user_source == 1">微信</span>
                <span class="alipay-color" v-if="list.user_source == 2">支付宝</span>
                <span class="card-color" v-if="list.user_source == 5">开卡</span>
              </td>
              <td>{{ list.add_time }}</td>
              <td>{{ list.equipment_number }}</td>
              <td>{{ list.pay_time }}</td>
              <td>
                <el-button size="mini" @click="cardEdit(list.user_id)">编辑</el-button>

                <el-button size="mini" @click="handleClick(list.user_id)">详情</el-button>

                <!-- <el-button  size="mini" @click="cardList(list.user_id)"
                  >查看水卡</el-button
                > -->
              </td>
            </tr>
          </tbody>
        </table>
        <div class="new-no-data-show" v-if="tableData.length <= 0 && isLoad">
          <img src="../../assets/images/no-data.png" alt="" />
          <div>暂无相关数据</div>
        </div>
      </div>
      <div class="same-page-inShow" v-if="tableData.length > 0 && isLoad">
        <!--//  分页-->
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page" :page-sizes="sizes" :page-size="pageSize"
          layout="total, prev, pager, next, jumper, sizes" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import { regionDataPlus, CodeToText } from "element-china-area-data";
  import $ from "jquery";

  export default {
    name: "userList",
    data: function () {
      return {
        loading: false, //加载动画
        date1: "",
        date2: "",
        community: "",
        tableData: [],
        userPhone: "",
        name: "",
        cardNum: "",
        page: 1,
        pageSize: 15,
        sizes: [15, 30, 40, 50],
        total: 0,
        isLoad: false,
      };
    }, //初始化执行
    created: function () {
      this.userList();
    },
    inject: ["reload"],
    methods: {
      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload();
      },
      //返回
      returnBack() {
        this.$router.back(-1);
      },
      search() {
        this.page = 1;
        this.userList();
      },
      reset() {
        this.page = 1;
        this.userPhone = "";
        this.date1 = "";
        this.date2 = "";
        this.name = "";
        this.userList();
      },
      handleClick(user_id) {
        this.$router.push({ path: "/userview", query: { user_id: user_id } });
      },
      handleSizeChange(val) {
        this.page = 1;
        this.pageSize = val;
        this.userList();
      },
      handleCurrentChange(val) {
        this.page = val;
        this.userList();
      },
      // 用户水卡
      cardList(user_id) {
        this.$router.push({
          path: "/cardlist",
          query: { user_id: user_id },
        });
      },

      cardEdit(user_id) {
        this.$router.push({
          path: "/useredit",
          query: {
            user_id,
          },
        });
      },
      userList() {
        var that = this;
        that.loading = true; //打开loading动画
        that.isLoad = false; //是否加载
        that.$post({
          url: "Partner/Users/getUserListTwo",
          data: {
            page: that.page,
            pageSize: that.pageSize,
            phone: that.userPhone,
            name: that.name,
            start_time: that.date1 ? that.date1 : "",
            end_time: that.date2 ? that.date2 : "",
          },
          success: (data) => {
            that.isLoad = true;
            that.loading = false; //关闭动画
            if (data.code == 1000) {
              that.tableData = []; // 清空数据
              var datalist = data.data.order;
              // datalist.forEach((item)=>{
              //   if(item.balance){
              //     item.balance = item.balance.substr(0,item.balance.length-1);
              //   }
              // })
              that.tableData = datalist;
              that.total = data.data.count;
            } else {
              that.total = 0;
              that.tableData = []; // 清空数据
            }
          },
        });
      },
    },
  };
</script>
<style>
  #userList {
    width: 100%;
    height: 100%;
    background: #ffffff;
  }

  #userList th,
  td {
    text-align: center !important;
  }

  #userList .el-table--border th {
    background-color: #e6e6e5 !important;
    border-color: #cccccc;
    padding: 10px 0;
    height: 60px;
  }

  #userList .el-table td {
    border-right: none;
    border-color: #cccccc;
  }

  #userList .btn {
    display: inline-block;
    border: 1px solid #2c5586;
    color: #2883be;
    cursor: pointer;
    padding: 0 5px;
    margin: 2px 0px;
    border-radius: 4px;
  }
</style>

<style scoped>
  .wechat-color {
    color: #009b4d;
  }

  .alipay-color {
    color: #2c5586;
  }

  .card-color {
    color: #323333;
  }
</style>